// main.js

import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import { XYZ } from 'ol/source';
import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';
import GeoJSON from 'ol/format/GeoJSON'; // ✅ 添加这一行
import ImageLayer from 'ol/layer/Image';
import ImageStatic from 'ol/source/ImageStatic';

import './style.css';
import 'ol/ol.css';

const view = new View({
  center: [114.25, 30.59],
  zoom: 4,
  projection: "EPSG:4326"
});

// 高德地图底图
const gaodeSource = new XYZ({
  url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}'
});
const gaodeLayer = new TileLayer({
  source: gaodeSource
});

const map = new Map({
  target: 'map',
  view,
  layers: [gaodeLayer]
});

// 加载矢量图层（GeoJSON）
const vectorLayer = new VectorLayer({
  source: new VectorSource({
    url: 'https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json',
    format: new GeoJSON() // ✅ 正确使用 GeoJSON 格式
  })
});
// 添加上矢量图层以后有个蒙版的效果
map.addLayer(vectorLayer);